<template>
  <el-dialog
    v-model="data.dialogVisible"
    :title="data.title"
    :width="data.width"
    draggable
  >
    <vxForm ref="formRef" :formData="formData" :formItems="formDolumn"></vxForm>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import vxForm from "@/components/vx-form/index.vue";
import formItems from "./data/add";
import { getTableDetaill } from "@/api/table_test";
import { ElMessage } from "element-plus";
let props = defineProps({
  detailData: {
    type: Object,
    default: {},
  },
});
interface dataType {
  dialogVisible: boolean;
  title: string;
  width: string;
}
const data = reactive<dataType>({
  dialogVisible: false,
  title: "新增",
  width: "50%",
});
const formRef = ref();
let formData = reactive({});
let formDolumn = ref(formItems);
const addForm = () => {
  let url =
    data.title == "新增" ? "/api/table_test/insert" : "/api/table_test/update";
  formRef.value
    .submitForm({
      url: url,
      method: "post",
      data: formData,
    })
    .then((res: any) => {
      if (res.code == 200) {
        formRef.value.resetForm();
        formData = reactive({});
        data.dialogVisible = false;
      }
    });
};
const cancel = () => {
  formRef.value.resetForm();
  data.dialogVisible = false;
  formData = reactive({});
};
watch(
  () => props.detailData,
  (newVal, oldVal) => {
    formData = reactive({});
    formData = props.detailData;
  }
);
watchEffect(() => {
  if (data.title == "查看") {
    formItems.items = formItems.items.map((item) => {
      item.readonly = true;
      return item;
    });
  } else {
    formItems.items = formItems.items.map((item) => {
      item.readonly = false;
      return item;
    });
  }
  let formDolumn = ref(formItems);
});
defineExpose({
  data,
  formData,
});
</script>

<style scoped></style>
